<template>
  <div
    style="
      background-color: #ffffff;
      margin: -20px;
      margin-right: 0;
      padding: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
    "
  >
    <div style="flex: 10; overflow: auto;margin-bottom: 24px;" ref="chat">
      <div
        style="
          background-color: #ffffff;
          display: flex;
          justify-content: flex-start;
          gap: 12px;
          align-items: center;
          width: 100%;
          padding-right: 12px;
          box-sizing: border-box;
          position: sticky;
          z-index: 99;
          top: 0;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          border-bottom: 1px solid #c0c4cc;
          padding-bottom: 12px;
        "
      >
        <div>
          <el-button type="text" @click="$router.replace('/consultation')">返回</el-button>
          <div>{{ $route.query.name }} - {{ $route.query.phone }}</div>
        </div>
      </div>
      <div
        style="display: flex; align-items: center; gap: 12px; margin: 18px 0"
        v-for="(item, index) in contentList"
        :key="index"
        :class="{ 'a-replier': item.type === 'answer' }"
      >
        <el-avatar icon="el-icon-user-solid" v-if="item.type === 'question'"></el-avatar>
        <span class="text">{{ item.content }}</span>
        <el-avatar icon="el-icon-user-solid" v-if="item.type === 'answer'"></el-avatar>
      </div>
    </div>
    <div style="display: flex; gap: 12px; flex: 1">
      <el-input v-model="replyContent" placeholder="输入回复内容"></el-input>
      <el-button
        style="max-height: 40px"
        @click="sendReply"
        type="primary"
        @keydown.enter="sendReply"
        >回复</el-button
      >
    </div>
  </div>
</template>

<script>
import BreadCrumbs from '@/components/BreadCrumbs';

export default {
  data() {
    return {
      contentList: [],
      replyContent: '', // 新增回复内容绑定
    };
  },
  components: {
    BreadCrumbs,
  },
  async mounted() {
    await this.getRightsList();

    this.$refs.chat.scrollTo({
      top: this.$refs.chat.scrollHeight,
      behavior: 'smooth',
    });
  },
  methods: {
    async getRightsList() {
      const { msg, data, code } = await this.$http.get(
        '/api/consultation/' + this.$route.params.id
      );
      if (code) return this.$message.error(msg);
      this.contentList = data;
    },
    async sendReply() {
      if (!this.replyContent) return this.$message.error('回复内容不能为空');
      // 发送回复的逻辑
      const { code, msg } = await this.$http.post('/api/consultation', {
        user_id: this.$route.params.id,
        content: this.replyContent,
        type: 'answer',
      });
      if (code) return this.$message.error(msg);
      this.replyContent = ''; // 清空回复框
      await this.getRightsList();
      this.$refs.chat.scrollTo({
        top: this.$refs.chat.scrollHeight,
        behavior: 'smooth',
      });
    },
  },
};
</script>

<style scoped lang="less">
.text {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px;
  max-width: 80%;
}

.a-replier {
  justify-content: end;
  margin-right: 20px;
}
</style>
